<template>
  <div>
    <el-card class="box-card">
      <span><i class="iconfont icon-dingdan1 icon"> </i>填写商品分类信息</span>
    </el-card>
    <el-form
      ref="productValue"
      :rules="rules"
      :model="productValue"
      label-width="200px"
    >
      <el-form-item label="分类名称:" prop="name">
        <el-input v-model="productValue.name" class="input-width"></el-input>
      </el-form-item>
      <el-form-item label="上级分类:">
        <el-select
          v-model="productValue.parent_id"
          placeholder="请选择"
          class="input-width"
        >
          <el-option
            v-for="item in productCateOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数量单位:">
        <el-input
          v-model="productValue.product_unit"
          class="input-width"
        ></el-input>
      </el-form-item>
      <el-form-item label="排序:">
        <el-input v-model="productValue.sort" class="input-width"></el-input>
      </el-form-item>
      <el-form-item label="是否显示:">
        <el-radio-group v-model="productValue.show_status">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否显示在导航栏:">
        <el-radio-group v-model="productValue.nav_status">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="关键词:">
        <el-input
          v-model="productValue.keywords"
          class="input-width"
        ></el-input>
      </el-form-item>
      <el-form-item label="分类描述:">
        <el-input
          v-model="productValue.description"
          class="input-width"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
//引入接口数据函数
import { fetchProductCateByParent, createProductCate } from "@/api/product";

export default {
  name: "productCateAdd",
  data: function() {
    return {
      //添加商品分类数据的默认值
      productValue: {
        description: "", //描述
        icon: "", //小图标
        keywords: "", //关键词
        name: "", //名称
        nav_status: 0, //是否显示在导航
        parent_id: 0, //上级节点id
        product_unit: "", //数量单位
        product_count: 0, //商品数量
        show_status: 0, //是否显示
        sort: 0, //排序
        level: 0, //0表示一级分类 1表示二级分类
      },
      rules: {
        //验证条件
        name: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
      },
      productCateOptions: [], //保存分类信息
    };
  },
  mounted: function() {
    this.getCateData();
  },
  methods: {
    //提交表单
    onSubmit: function() {
      this.$refs.productValue.validate((valid) => {
        if (valid) {
          if (this.productValue.parent_id != 0) {
            this.productValue.level = 1; //二级分类的级别 ，注意：level=0 一级分类  level = 1 二级分类
          }
          console.log(this.productValue);
          createProductCate(this.productValue).then((res) => {
            console.log(res);
            if (res.type == "success") {
              this.$message({
                message: "添加商品分类成功",
                duration: 1000,
                type: "success",
              });
              this.$router.push("/pms/productCate");
            }
          });
        } else {
          return false;
        }
      });
    },
    async getCateData() {
      let res = await fetchProductCateByParent(0, {}); //一级分类
      console.log(res);
      let list = res.data;
      this.productCateOptions.push({ value: 0, label: "顶级分类" }); //将顶级分类推进去
      list.forEach((i) => {
        this.productCateOptions.push({ value: i.id, label: i.name });
      });
      console.log(this.productCateOptions);
    },
  },
};
</script>

<style scoped="scoped">
.box-card {
  margin-bottom: 20px;
}
.input-width {
  width: 600px;
}
</style>
